<div class="container">
  <div class="header-button">
    <mat-form-field appearance="outline">
      <mat-label>过滤</mat-label>
      <input #input (keyup)="applyFilter($event)" matInput>
    </mat-form-field>
    <button (click)="createInstance()" mat-stroked-button>添加</button>
  </div>
  <table [dataSource]="dataSource" mat-table matSort>

    <!--实例-->
    <ng-container matColumnDef="instance_name">
      <th *matHeaderCellDef mat-header-cell>实例</th>
      <td *matCellDef="let element" mat-cell>{{ element.instance_name }}</td>
    </ng-container>
    <!--描述-->
    <ng-container matColumnDef="instance_describe">
      <th *matHeaderCellDef mat-header-cell>描述</th>
      <td *matCellDef="let element" mat-cell>{{ element.instance_describe }}</td>
    </ng-container>
    <!--地址-->
    <ng-container matColumnDef="address">
      <th *matHeaderCellDef mat-header-cell mat-sort-header>地址</th>
      <td *matCellDef="let element" mat-cell>{{ element.address }}</td>
    </ng-container>
    <!--端口-->
    <ng-container matColumnDef="port">
      <th *matHeaderCellDef mat-header-cell mat-sort-header>端口</th>
      <td *matCellDef="let element" mat-cell>{{ element.port }}</td>
    </ng-container>
    <!--用户名-->
    <ng-container matColumnDef="username">
      <th *matHeaderCellDef mat-header-cell>用户名</th>
      <td *matCellDef="let element" mat-cell>{{ element.username }}</td>
    </ng-container>
    <!--配置文件-->
    <ng-container matColumnDef="cnf_file">
      <th *matHeaderCellDef mat-header-cell>配置文件</th>
      <td *matCellDef="let element" mat-cell>{{ element.cnf_file }}</td>
    </ng-container>
    <!--数据目录-->
    <ng-container matColumnDef="data_dir">
      <th *matHeaderCellDef mat-header-cell>数据目录</th>
      <td *matCellDef="let element" mat-cell>{{ element.data_dir }}</td>
    </ng-container>
    <!--状态-->
    <ng-container matColumnDef="status">
      <th *matHeaderCellDef mat-header-cell>状态</th>
      <td *matCellDef="let element" mat-cell>
        {{ instanceStatus(element.status) }}
      </td>
    </ng-container>
    <!--创建时间-->
    <ng-container matColumnDef="create_at">
      <th *matHeaderCellDef mat-header-cell>创建时间</th>
      <td *matCellDef="let element" mat-cell>{{ element.create_at }}</td>
    </ng-container>
    <!--_tools-->
    <ng-container matColumnDef="_tools">
      <th *matHeaderCellDef mat-header-cell></th>
      <td *matCellDef="let element" mat-cell>

        <button [matMenuTriggerFor]="menu" mat-icon-button>
          <mat-icon>more_vert</mat-icon>
        </button>
        <mat-menu #menu="matMenu">
          <button (click)="updateInstance(element);" mat-menu-item>
            <mat-icon color="accent">edit</mat-icon>
            <span>修改</span>
          </button>
          <mat-divider></mat-divider>
          <button (click)="deleteInstance(element.id)" mat-menu-item>
            <mat-icon color="warn">delete</mat-icon>
            <span>删除</span>
          </button>
        </mat-menu>
      </td>
    </ng-container>

    <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
    <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
  </table>
  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons></mat-paginator>
</div>
